<template>
    <div class="trigger-condition" @click.stop>
        <el-radio-group v-model="state.currentNodeInfoFront.options.convertType" class="trigger-condition-title">
            <el-radio-button :label="'mapping'">配置方式</el-radio-button>
            <el-radio-button :label="'code'" v-if="state.trigger_code_gray">代码方式</el-radio-button>
        </el-radio-group>
        <conditional-config v-show="state.currentNodeInfoFront.options.convertType === 'mapping'"></conditional-config>
        <code-config v-if="state.currentNodeInfoFront.options.convertType === 'code'"></code-config>
    </div>
</template>

<script>
import state from '@src/modules/trigger/view/setting/util/state.js'
import conditionalConfig from './components/conditionalConfig.vue'
import codeConfig from './components/codeConfig.vue'

export default {
    name: 'TriggerCondition',
    computed: {
        state() {
            return state;
        },
    },
    components: {
        conditionalConfig,
        codeConfig,
    },
    created() {
        if (!Object.keys(this.state.currentNodeInfoFront.options || {}).includes('convertType')) {
            this.$set(state.currentNodeInfoFront, 'options', {
                ...state.currentNodeInfoFront?.options,
                convertType: 'mapping',
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.trigger-condition {
    padding: 16px 24px;
    &-title {
        margin-bottom: 8px;
    }
}
</style>